<script>
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator';
import { createPage } from "@/api/index.js";

@Component
export default class App extends Vue {
    activeIndex="4"
    pagename = ""
    show_creatd_page = false
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    }
    creatd_page(){
      this.show_creatd_page = true
    }
    sendCreate(){
        if(!this.pagename) return
        // conosle.log(this.pagename)
        createPage({ pagename : this.pagename }).then(res=>{
            console.log(res)
        })
    }
    change(e){
        this.pagename = e 
    }
    render(){
        return (
            <div class="public_component" >
                <el-menu default-active={this.activeIndex} class="el-menu-demo" mode="horizontal" onSelect={this.handleSelect}>
                    {
                        /**
                        <el-menu-item index="1">
                            <router-link to={ { name:"index" } } tag="div" >创建页面</router-link>
                        </el-menu-item>
                         */
                    }
                    <el-menu-item index="4">
                        <router-link to={ { name:"page_view_list" } } tag="div" >查看页面</router-link>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3" onClick={this.creatd_page} >创建页面</el-menu-item>
                    {/*<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>*/}
                </el-menu>
                <div class="page_view" >
                    <keep-alive>
                        <router-view />
                    </keep-alive>
                </div> 
                {this.show_creatd_page && <div class="createPage_from">
                    <el-input value={this.pagename}  onInput={this.change} placeholder="请输入页面名"></el-input> 
                    <el-button onClick={()=>(this.show_creatd_page = false)} >取消</el-button>
                    <el-button onClick={this.sendCreate} type="primary">创建</el-button>
                </div>}
            </div>
        )
    }
}
</script>

<style lang="less" >
@import "./index.less";
</style>